<template>
  <div>
    <div class="screen-box">
      <div class="screen-item">
        <div class="screen-item-field">
          金额
        </div>
        <div class="screen-item-content">
          <input type="number" v-model.number="credit" pattern="[0-9]*"/>
          <div class="input-text">元</div>
        </div>
      </div>
      <div class="screen-item">
        <div class="screen-item-field">
          期限
        </div>
        <div class="screen-item-content">
          <select v-model="audit">
            <option v-for="item in audits" :value="item.value" :key="item.value">{{item.label}}</option>
          </select>
          <div class="select-down"></div>
        </div>
      </div>
    </div>
    <div class="screen-hint">建议同时申请<span style="color:red;">3-5</span>款,保证最快下款</div>
    <div class="loading-box" v-if="isLoading">
      <loading></loading>
    </div>
    <transition-group class="contents" name="list" tag="div" v-else>
      <ad-item
        v-for="(item, index) in data"
        :key="item.id"
        :data="item"
        @click.native="skip(item)"
        >
      </ad-item>
    </transition-group>
  </div>
</template>
<script>
import AdItem from '@/components/AdItem'
import { mapGetters } from 'vuex'
export default {
  name: 'screen',
  components: {
    AdItem
  },
  created () {
    this.isLoading = true
    Promise.all([
      this.$api.get(`ads`),
      this.$api.get('ads/priority')
    ]).then(result => {
      this.isLoading = false
      this.ads = result[0].data || []
      this.apps = result[1].data || {}
    })
  },
  computed: {
    ...mapGetters({
      appname: 'global/appname'
    }),
    data () {
      let ids = this.apps[this.credit] || []
      let topData = []
      if (ids.length > 0) {
        topData = this.ads.filter(item => ids.indexOf(item.id) > -1)
      }
      let data = this.ads.filter(item => {
        // 过滤掉置顶的产品
        if (ids.indexOf(item.id) > -1) {
          return false
        }
        // 过滤掉贷款金额不符合的产品
        if (item.min_credit > this.credit || item.max_credit < this.credit) {
          return false
        }
        // 过滤掉贷款期限不符合的产品
        if (this.audit !== -1 && (item.min_audit > this.audit || item.max_audit < this.audit)) {
          return false
        }
        return true
      })
      data = window._.shuffle(data)
      // google统计
      window.ga && window.ga('send', 'event', this.appname, `金额:${this.credit};期限:${this.audit}`, '筛选')
      return [...topData, ...data]
    }
  },
  data () {
    return {
      apps: {},
      credit: 1000,
      audit: -1,
      audits: [
        {
          label: '不限',
          value: -1
        }, {
          label: '7天',
          value: 7
        }, {
          label: '14天',
          value: 14
        }, {
          label: '一个月',
          value: 30
        }, {
          label: '三个月',
          value: 90
        }, {
          label: '六个月',
          value: 180
        }, {
          label: '一年',
          value: 360
        }
      ],
      isLoading: false,
      ads: []
    }
  },
  methods: {
    skip (item) {
      this.$router.push({ name: 'Detail', params: { id: item.app_store_id } })
    }
  }
}
</script>
<style lang="scss" scoped>
.screen-hint{
  line-height: 3;
  text-align: center;
  color: #333;
  font-size: 14px;
}
.list-enter-active, .list-leave-active {
  transition: all .3s;
}
.list-enter, .list-leave-to /* .list-leave-active 在低于 2.1.8 版本中 */ {
  opacity: 0;
  transform: translateY(30px);
}
.screen-box{
  display: flex;
  width: 100vw;
  background: white;
  padding: 10px 0;
  .screen-item {
    flex-basis: 0;
    flex-grow: 1;
    flex-flow: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    &:first-child {
      border-right: 1px solid #ccc;
    }
    .screen-item-content {
      border: 1px solid #ccc;
      border-radius: 20px;
      padding: 5px;
      width: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .input-text{
        position: absolute;
        right: 15px;
      }
      .select-down{
        position: absolute;
        right: 15px;
        width: 10px;
        height: 20px;
        background: url('~@/assets/img/select_down.png') no-repeat center;
        background-size: 10px 10px;
      }
    }
    input {
      text-align: end;
      width: 70px;
      margin-right: 30px;
      border: none;
    }
    select {
      margin: 0;
      padding: 0;
      border: none;
      appearance: none;
      overflow: hidden;
      background: transparent;
    }
    /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
    select::-ms-expand { display: none; }
  }
}
</style>
